<script>

    import { Post } from '../lib/net.js';
    import { PwdLogin } from '../api.js';
    import md5 from 'md5';

    let data = {
        pwd_old: "",
        pwd_new: "",
        pwd_new_repeat: "",
    }

    function submit(){
        if(data.pwd_new !== data.pwd_new_repeat) {
            return alert("两次输入的新密码不相同");
        }

        if(data.pwd_new.length < 8) return alert("请设置8位以上密码")

        let _data = {
            pwd_old: md5(data.pwd_old),
            pwd_new: md5(data.pwd_new),
            pwd_new_repeat: md5(data.pwd_new_repeat),
        }
        Post(PwdLogin,_data);
    }

</script>

<div class="container">
    <div class="change-pwd">
        <span>旧密码</span><br>
        <input type="password" placeholder="请输入旧密码" class="input mb-27" bind:value={data.pwd_old}>

        <span>新密码</span><br>
        <input type="password" placeholder="请输入新密码" class="input mb-27" bind:value={data.pwd_new}>

        <span>确认密码</span><br>
        <input type="password" placeholder="请确认密码" class="input mb-27" bind:value={data.pwd_new_repeat}>

        <button class="button is-link"
                style="width: 468px; margin-top: 39px;" on:click={submit}>确认</button>
    </div>
</div>

<style lang="scss">
    .container {
        background: #fff;
        align-items: center;
        justify-content: center;
        margin: 10px;
        height: 100%
    }

    .change-pwd {
        width:740px;
        height:740px;
        background:rgba(255,255,255,1);
        border:2px solid rgba(237, 239, 253, 1);
        border-radius:10px;
        margin: 0 auto;

        padding: 158px 137px;
        box-sizing: border-box;
    }

    .mb-27 {
        margin-bottom: 27px;
        margin-top: 12px;
        background:rgba(249,249,249,1);
    }
</style>
